<template>
    <div class="actgraphd">
      <div class="ask">
        <div class="header">
          <i
            class="el-icon-question"
            style="font-size: large; margin-right: 10px"
          />
          目标行为推理
        </div>
        <div class="input">
          <el-form :model="actionForm" :rules="rules" :inline="true" ref="actionForm">
            <el-form-item  prop="nodeId">
              <el-select  placeholder="实体名称" v-model="actionForm.nodeId" >
                <el-option
                  v-for="node in nodeOptions"
                  :key="node.key"
                  :label="node.value"
                  :value="node.key">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="maichong">
              <el-select v-model="actionForm.maichong" multiple placeholder="请选择脉冲宽度">
                <el-option
                  v-for="item in kuandu"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="chongpin">
              <el-select v-model="actionForm.chongpin"  multiple placeholder="请选择重频范围">
                <el-option
                  v-for="item in gaodu"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="zaipin">
              <el-select v-model="actionForm.zaipin" multiple placeholder="请选择载频范围">
                <el-option
                  v-for="item in gaodu"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="plan">
              <el-select  placeholder="请选择航行计划" v-model="actionForm.plan">
                <el-option
                  v-for="item in jihua"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            
            
            <el-form-item prop="dianciState">
              <el-select  placeholder="请选择电磁状态" v-model="actionForm.dianciState">
                <el-option
                  v-for="item in dainciOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="speed" >
              <el-input placeholder="速度" v-model="actionForm.speed" clearable></el-input>
            </el-form-item>
            <el-form-item prop="angle" >
              <el-input  placeholder="航向角" v-model="actionForm.angle" clearable></el-input>
            </el-form-item>
            <el-form-item prop="position">
              <el-input
                placeholder="位置信息"
                v-model="actionForm.position"
                clearable
                ></el-input>
            </el-form-item>
            <el-form-item prop="distance">
              <el-input
                placeholder="敌我距离"
                v-model="actionForm.distance"
                clearable
                ></el-input>
            </el-form-item>
            <el-button type="primary" plain  @click="actionPredictSearch('actionForm')" style="float: right;margin-right: 100px;">
                开始推理</el-button>
          </el-form>
          
      </div>
      </div>
      <div class="answer">
        <div class="header">答案</div>
        <!-- v-show="this.showTable" -->
        <div class="text" >
          <el-table
          v-loading="loading"
          element-loading-text="模型推理中..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          :data="this.tableData"
          border
          :header-cell-style="{backgroundColor:'#f6f8fa', color: '#333'}"
          style="width: 100%;height: 100%;">
          <!-- <el-table-column
            type="index"
            width="50">
          </el-table-column> -->
          <el-table-column
            prop="zzmbxwName"
            label="目标行为"
           >
          </el-table-column>
          <el-table-column
            prop="properties.脉冲宽度"
            label="脉冲宽度"
            >
          </el-table-column>
          <el-table-column
            prop="properties.重频范围"
            label="重频范围"
            >
          </el-table-column>
          <el-table-column
            prop="properties.载频范围"
            label="载频范围"
           >
          </el-table-column>
          <el-table-column
            prop="properties.速度"
            label="速度"
           >
          </el-table-column>
          <el-table-column
            prop="properties.航向角"
            label="航向角"
            >
          </el-table-column>
          <el-table-column
            prop="properties.航行计划"
            label="航行计划"
            >
          </el-table-column>
          <el-table-column
            prop="properties.电磁状态"
            label="电磁状态"
            >
          </el-table-column>
          <el-table-column
            prop="properties.位置信息"
            label="位置信息"
            
            >
          </el-table-column>
          <el-table-column
            prop="properties.敌我距离"
            label="敌我距离"
            >
          </el-table-column>
          <el-table-column
            prop="score"
            label="得分"
            width="70"
            >
          </el-table-column>
          
        </el-table>
        </div>
      </div>
      <!-- <div class="graph">
        <div class="header">图谱演示</div>
        <div class="show">
          <GraphBoard ref="actionPredictBoard" />
        </div>
      </div> -->
    </div>
  </template>
  
  <script>
  import { mapGetters, mapMutations, mapActions } from 'vuex'
  import GraphBoard from '../../graph/components/GraphBoard'
  import { _graphData } from '../../graph/utils/data'
  
  export default {
    name: 'ActionPredict',
    components: {
      GraphBoard,
    },
    data() {
      return {
        actionForm:{
          nodeId: '',
          maichong: [],
          chongpin: [],
          zaipin: [],
          plan: '',
          speed: '',
          angle: '',
          position: '',
          distance: '',
          dianciState: '',
        },
        behavior: '',
        graphData: null,
        recommendHotQues: [],
        tableData: null,
        nodeOptions: [],
        nodes:{},
       
        behaviorParams:[],
        loading: false,
        // behaviorParams: [action,plan,speed,angle]
        kuandu: [{
          value: '宽',
          label: '宽'
        }, {
          value: '中',
          label: '中'
        }, {
          value: '窄',
          label: '窄'
        }],
        gaodu: [{
          value: '高',
          label: '高'
        }, {
          value: '中',
          label: '中'
        }, {
          value: '低',
          label: '低'
        }],
        jihua:[{
          value: '巡逻',
          label: '巡逻'
        }, {
          value: '远离',
          label: '远离'
        },{
          value: '加速逼近',
          label: '加速逼近'
        },{
          value: '迂回靠近',
          label: '迂回靠近'
        }],
        dainciOptions:[{
          value: '静默',
          label: '静默'
        }, {
          value: '开机',
          label: '开机'
        }],
        
        showTable: false,
        rules: {
          nodeId: [
            { required: true, message: '请选择实体名称', trigger: 'blur' }
          ],
          maichong: [
            { required: true, message: '请选择脉冲宽度', trigger: 'change' }
          ],
          chongpin: [
            { required: true, message: '请选择重频范围', trigger: 'change' }
          ],
          zaipin: [
            { required: true, message: '请选择载频范围', trigger: 'change' }
          ],
          plan: [
            { required: true, message: '请选择航行计划', trigger: 'change' }
          ],
          dianciState: [
            { required: true, message: '请选择电磁状态', trigger: 'change' }
          ],
          speed: [
            { required: true, message: '请输入速度', trigger: 'change' }
          ],
          angle: [
            { required: true, message: '请输入航向角', trigger: 'change' }
          ],
          position: [
            { required: true, message: '请输入位置信息', trigger: 'change' }
          ],
          distance: [
            { required: true, message: '请输入敌我距离', trigger: 'change' }
          ],


        }

      }
    },
    mounted() {
      // const projectId = Number(this.$route.params.projectId)
      const projectId = 0
      // this.getHotQuestionList(projectId)
      this.nodes = {projectId:projectId,group:"null",size: 10}
      this.getNodeList(this.nodes).then((res) => {
        this.nodeOptions = res.map(item => ({
          key: item.nodeId,
          value: item.name,
          projectId: item.projectId
        }))
      }
      )
      // this.actionInput = this.graphDialogueQues
      if (!this.actionPredictGraphData) {
        return
      } else {
        this.renderGraph()
      }
      if (!this.actionPredictTableData) {
        return
      } else {
        this.renderTable()
      }
    },
    computed: {
      ...mapGetters([
        'actionPredictQues',
        // 'dialogueAnswer',
        'actionPredictGraphData',
        'actionPredictTableData'
      ]),
    },
    // watch: {
    //   nodeOptions(options) {
    //   this.nodeOptions = options
    // },

    // },
    methods: {
      ...mapMutations(['setActionPredictQues']),
      ...mapActions([
        'getProjectInfo',
        'actionPredict',
        'actionPredictTable',
        // 'getHotQuestionList',
        'getNodeList'
      ]),
      renderGraph() {
        this.graphData = this.actionPredictGraphData.graph
        const actionPredictBoard = this.$refs.actionPredictBoard
        actionPredictBoard.mountGraphData(this.graphData)
      },
      renderTable() {
        this.tableData = this.actionPredictTableData.data
        this.loading = false
        this.showTable = true
        console.log(this.tableData)
      },
      // actionPredictSearch() {
      //   this.behaviorParams = [this.action,this.plan,this.speed,this.angle]
      //   const projectId = Number(this.$route.params.projectId)
      //   // this.nodeId = 4
      //   const actionPredictQues = {
      //     nodeId: this.nodeId,
      //     behaviorParams: this.behaviorParams,
      //     projectId
      //   } 
      //   this.setActionPredictQues(actionPredictQues)
      //   this.actionPredict(actionPredictQues).then((res) => {
      //     if (res.nodes === null) {
      //       this.$message.warning('查无结果！')
      //     } else {
      //       this.renderGraph()
      //     }
      //   })
      // },
      actionPredictSearch(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loading = true
            // const projectId = Number(this.$route.params.projectId)
            // this.setActionPredictQues(actionPredictQues)
            for(let index = 0; index < this.nodeOptions.length; index++)  {
              
              var nodeId = this.actionForm.nodeId
              var behaviorParams = {
                脉冲宽度: this.actionForm.maichong.toString(),
                重频范围: this.actionForm.chongpin.toString(),
                载频范围: this.actionForm.zaipin.toString(),
                速度: this.actionForm.speed,
                航向角: this.actionForm.angle,
                航行计划: this.actionForm.plan,
                电磁状态: this.actionForm.dianciState,
                位置信息: this.actionForm.position,
                敌我距离: this.actionForm.distance
              }
            
              if (this.nodeOptions[index].key === nodeId){
                const projectId = this.nodeOptions[index].projectId
                this.actionPredictTable({projectId, nodeId, behaviorParams}).then((res) => {
                  // if(res.success === false){
                  //   this.loading = false
                  //   this.$message.warning('推理过程产生错误！')
                  // }else {
                    if (res.length === null) {
                      this.loading = false
                      this.$message.warning('查无结果！')
                    } else {
                      this.renderTable()
                    }
                    
                  // }
                  
                })
                
              }
            }
            

          } else {
            console.log('error submit!!');
            return false;
          }
        });
        
      },
      
    },
  }
  </script>
  
<style>
  .actgraphd {
    height: 100%;
  }
  .actgraphd > .ask {
    border: 1px solid #DCDFE6;
    margin-bottom: 20px;
  }
  
  .actgraphd .header {
    display: flex;
    align-items: center;
    height: 40px;
    background-color: #f6f8fa;
    font-size: small;
    padding: 0 10px;
  }
  .actgraphd > .ask > .input {
    text-align: left;
    padding: 10px;
  }
  .actgraphd > .answer {
    width: 100%;
    height: 75%;
    float: left;
    border: 1px solid #DCDFE6;
    margin-right: 30px;
  }
  .actgraphd > .graph {
    /* width: calc(40% - 30px); */
    width: calc(100% - 0px);
    height: 75%;
    float: left;
    border: 1px solid #DCDFE6;
  }
  .actgraphd > .graph > .show {
    height: calc(100% - 35px);
  }
  .actgraphd > .answer > .text {
    width: calc(100% - 20px);
    height: calc(100% - 55px);
    padding: 10px;
    font-family: serif;
    font-size: 15px;
    /* overflow: scroll; */
  }
  
 .input .el-select  .el-select__tags  {
   top: 50%;
  }


  .input .el-form-item {
    margin-right: 10px;
    margin-bottom: 10px;
    /* width: 17%; */
  }

  </style>
  